<template>
  <div class="container">
    <!-- 标题定制区域 -->
    <div class="diy-container">
      <img src="../../assets/img/top1.png" alt="">
      <div class="one">
        <p>迎新杯--全新赛制</p>
      </div>
      <div class="two">
        <p>2023年全新赛制狂欢来袭</p>
        <p>全场新积分赛制<span>小组淘汰制</span><span>诚挚邀请</span></p>
      </div>
    </div>
    <!-- 操作 -->
    <el-row>
      <el-col class="operation">
        <el-row type="flex" justify="end">
          <!-- 添加成员 -->
          <el-col :span="1.1" style="margin-right: 5px;">
            <el-select v-model="groupValue" placeholder="请选择小组" clearable size="small">
              <el-option
                v-for="(item, key) in groupData"
                :key="key"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1.1" style="margin-right: 5px;">
            <el-input placeholder="请输入队员名称" v-model="teamMemberValue" clearable size="small"></el-input>
          </el-col>
          <el-col :span="1.1" style="margin-right: 70px;"><el-button type="primary" @click="addTeamMember" size="small">添加队员</el-button></el-col>
          <!-- 操作成员分数 -->
          <el-col :span="1.1" style="margin-right: 5px;">
            <el-select v-model="personValue" placeholder="请选择队员" @change="changeTeamMember" @focus="focusTeamMember" size="small" clearable>
              <el-option
                v-for="(item, key) in personData"
                :key="key"
                :label="`${item.groupValue}--${item.label}`"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1.1" style="margin-right: 5px;">
            <h3 class="current-number-class">分数:</h3>
          </el-col>
          <el-col :span="1.1" style="margin-right: 5px;">
            <el-input-number
              size="small"
              v-model="currentScore"
              @change="changeTeamMemberNumber"
              :min="0"
              :disabled="!this.currentTeamMember ? true : false"
            ></el-input-number>
          </el-col>
          <el-col :span="1.1" style="margin-right: 5px;">
            <h3 class="current-number-class">场次:</h3>
          </el-col>
          <el-col :span="1.1" style="margin-right: 5px;">
            <el-input-number
              size="small"
              v-model="currentSessions"
              @change="changeTeamMemberSessions"
              :min="0"
              :disabled="!this.currentTeamMember ? true : false"
            ></el-input-number>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row>
       <el-col :span="24" class="data-display">
        <el-table
          size="small"
          :data="matchPersonData"
          style="width: 100%"
          stripe
          border
        >
          <el-table-column prop="teamMember" label="队员名称" align="center" />
          <el-table-column prop="teamName" label="所属小组" align="center" />
          <el-table-column prop="teamMemberSessions" label="场次" align="center" />
          <el-table-column prop="teamMemberPoints" label="积分" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="danger" size="small" @click="deleteSelectTeamMember(scope.row)">删除队员</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { setItem, getItem } from '../../../utils/storage'
export default {
  name: 'IntegralCalculation',
  data() {
    return {
      // 成员数据
      teamMemberValue: '',
      // 所有小组数据
      groupValue: '',
      groupData: [
        { label: 'A组', value: 'A组' },
        { label: 'B组', value: 'B组' },
        { label: 'C组', value: 'C组' },
        { label: 'D组', value: 'D组' },
        { label: 'E组', value: 'E组' },
        { label: 'F组', value: 'F组' }
      ],
      // 所有队员数据
      personValue: '',
      personData: [],
      // 积分榜数据
      matchPersonData: [],
      // 当前分数
      currentScore: 0,
      // 当前选择的队员
      currentTeamMember: null,
      // 当前场地
      currentSessions: 0
    }
  },
  mounted() {
    this.getAllTeamMember()
  },
  methods: {
    // 唯一值
    uuid(){
      const tempUrl = URL.createObjectURL(new Blob());
      const uuid = tempUrl.toString();
      URL.revokeObjectURL(tempUrl);  // 释放这个url
      return uuid.substring(uuid.lastIndexOf("/") + 1)
    },
    // 获取所有成员数据
    getAllTeamMember() {
      const temp = getItem('personData')
      // 点击队员列表按照字母排序A-Z
      this.personData = temp && temp.sort((a, b) => {
        if (a.groupValue.slice(0,1) < b.groupValue.slice(0,1)) { return -1; }
        if (a.groupValue.slice(0,1) > b.groupValue.slice(0,1)) { return 1; }
        return 0;
      }) || []

      // 展示所有比赛队员数据
      let temp2 = JSON.parse(JSON.stringify(this.personData))
      this.matchPersonData = temp2 && temp2.map(item => {
        return {
          teamMember: item.label,
          teamName: item.groupValue,
          teamMemberSessions: item.currentSessions,
          teamMemberPoints: item.currentScore
        }
      }).sort((a, b) => b.teamMemberPoints - a.teamMemberPoints)
    },
    // 添加成员
    addTeamMember() {
      // 校验
      if (!(this.teamMemberValue && this.groupValue)) {
        this.$message.warning('请完善队员数据')
        return
      }

      // 判断所有队员数据是否为空
      if(!(this.personData && this.personData.length > 0)) {
        this.personData.push({
          label: this.teamMemberValue,
          value: `1001_${this.uuid()}`,
          groupValue: this.groupValue,
          currentSessions: 0,
          currentScore: 0,
        })
        setItem('personData', this.personData)
        this.getAllTeamMember()
      } else {
        // 获取数值最高的id, 后面用作数据递增
        this.personData = getItem('personData').sort((a, b) => parseInt(b.value.split('_')[0]) - parseInt(a.value.split('_')[0]))

        // 判断该队伍中是否有该成员
        const isTeamMember = this.personData.some(item => item.label === this.teamMemberValue && item.groupValue === this.groupValue)
        if (isTeamMember) {
          this.$message.warning('该成员已存在这个小组, 请勿重新添加')
          return
        }

        // 没有则添加该成员
        let newValue = parseInt(this.personData[0].value.split('_')[0])
        this.personData.push({
          label: this.teamMemberValue,
          value: `${++newValue}_${this.uuid()}`,
          groupValue: this.groupValue,
          currentSessions: 0,
          currentScore: 0,
        })

        // 更新本地数据
        setItem('personData', this.personData)
        this.getAllTeamMember()
      }
    },
    // 聚焦成员下拉触发
    focusTeamMember() {
      // 聚焦成员下拉时, 重新拉取最新数据, 以免旧数据
      this.getAllTeamMember()
    },
    // 改变成员下拉触发
    changeTeamMember(value) {
      const currentTeamMember = this.personData && this.personData.filter(item => item.value === value)[0]
      this.currentScore = currentTeamMember && currentTeamMember.currentScore || 0
      this.currentSessions = currentTeamMember && currentTeamMember.currentSessions || 0
      this.currentTeamMember = currentTeamMember || null
    },
    // 改变分数加减触发
    changeTeamMemberNumber(item) {
      // 修改数据
      this.currentTeamMember.currentScore = item
      const currentIndex = this.personData.findIndex(item => item.value === this.currentTeamMember.value)
      this.personData[currentIndex] = this.currentTeamMember

      // 同步数据
      setItem('personData', this.personData)
      this.getAllTeamMember()
    },
    // 改变场地加减触发
    changeTeamMemberSessions(item) {
      // 修改数据
      this.currentTeamMember.currentSessions = item
      const currentIndex = this.personData.findIndex(item => item.value === this.currentTeamMember.value)
      this.personData[currentIndex] = this.currentTeamMember

      // 同步数据
      setItem('personData', this.personData)
      this.getAllTeamMember()
    },
    // 删除选中的队员
    deleteSelectTeamMember(row) {
      this.$confirm('确定要删除该队员吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除数据
        const newData = this.personData.filter(item => !(item.label === row.teamMember && item.groupValue === row.teamName))
        this.personData = newData

        // 同步数据
        setItem('personData', this.personData)
        this.getAllTeamMember()
      }).catch(() => {
        this.$message.info('操作取消')
      })
    }
  }
}
</script>

<style lang="scss">
</style>

<style lang="scss" scoped>
  .container {
    overflow: auto;
    max-width: 100%;
    height: 100%;
    padding: 0px 50px 50px;
    background-image: url('../../assets/img/bg2.jpg');
    background-position: center center;
    .diy-container {
      text-align: center;
      margin: 30px 0 20px;
      border-radius: 10px;
      img {
        width: 285px;
      }
      .one {
        width: 491px;
        height: 65px;
        margin: 10px auto 0;
        background-color: #ad422b;
        border-radius: 10px;
        font-size:50px;
        color:white;
        text-shadow:2px 3px 1px #151515;
        p {
          margin: 0;
          padding: 0;
          &:first-child {
            line-height: 65px;
          }
        }
      }
      .two {
        p {
          margin: 0;
          padding: 0;
          &:first-child {
            color: #ffffff;
            font-weight: bold;
            font-size: 27px;
            letter-spacing: 5px;
            margin: 5px 0;
          }
          &:last-child {
            font-size: 18px;
            color: white;
          }
          span {
            margin-left:20px;
          }
        }
      }
    }
    .operation {
      margin-bottom: 20px;
    }
    .data-display .el-table {
      border-radius: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.692);
    }
    .current-number-class {
      margin: 0;
      padding: 0;
      line-height: 32px;
      font-size: 20px;
      color: white;
    }
  }
  .container::-webkit-scrollbar {
    display:none;
  }
</style>
